<template>
    <div class="content-wrapp">
        <el-form ref="formData" :model="formData" label-width="60px">
            <el-form-item label="用户名" prop="roleName">
                <el-input v-model="formData.roleName" placeholder="请输入" size="small"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select v-model="formData.status" placeholder="请选择活动区域" size="small">
                    <el-option label="全部" value></el-option>
                    <el-option label="正常" value="0"></el-option>
                    <el-option label="禁用" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label-width="20px">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="small"
                    @click="loadRoleList"
                >搜索</el-button>
                <el-button
                    icon="el-icon-circle-close"
                    size="small"
                    @click="$refs['formData'].resetFields()"
                >重置</el-button>
                <el-button
                    type="success"
                    icon="el-icon-circle-plus-outline"
                    size="small"
                    @click="$refs.modal.add()"
                    v-if="addEnable"
                >新增</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" v-loading="loading">
            <el-table-column prop="roleId" label="角色编号"></el-table-column>
            <el-table-column prop="roleName" label="角色名称"></el-table-column>
            <el-table-column prop="roleKey" label="权限字符"></el-table-column>
            <el-table-column prop="roleSort" label="显示顺序"></el-table-column>
            <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                    <el-switch
                        v-model="scope.row.status"
                        active-value="0"
                        inactive-value="1"
                        :disabled="$store.getters.userId === scope.row.userId"
                        @change="onChangeStatus(scope.row)"
                    ></el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
            <el-table-column fixed="right" label="操作" width="240">
                <template slot-scope="scope">
                    <el-button
                        type="success"
                        size="mini"
                        v-if="editEnabel"
                        @click="$refs.modal.edit(scope.row)"
                    >编辑</el-button>
                    <el-button
                        type="primary"
                        size="mini"
                        v-if="editEnabel"
                        @click="$refs.scopemodal.edit(scope.row)"
                    >数据权限</el-button>
                    <el-button
                        type="danger"
                        size="mini"
                        v-if="removeEnable"
                        @click="deleteDel(scope.row.roleId)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <role-modal ref="modal" @ok="loadRoleList" />
        <role-scope-modal ref="scopemodal" @ok="loadRoleList" />
    </div>
</template>

<script>
import { getRoleList, delRole, changRoleStatus } from "@/api/system";
import RoleModal from "./modules/RoleModal.vue";
import RoleScopeModal from "./modules/RoleScopeModal.vue";
import { checkPermission } from "@/utils/permissions";
const ERR_OK = 200;
export default {
    components: {
        RoleModal,
        RoleScopeModal
    },
    data() {
        return {
            formData: {}, 
            tableData: [],
            loading: false,
            addEnable: checkPermission("system:role:add"),
            editEnabel: checkPermission("system:role:edit"),
            removeEnable: checkPermission("system:role:remove")
        };
    },
    created() {
        this.loadRoleList();
    },
    methods: {
        loadRoleList() {
            this.loading = true;
            getRoleList(this.formData).then(res => {
                this.tableData = res.data.rows;
                this.loading = false;
            });
        },
        onChangeStatus(item) {
            changRoleStatus({
                roleId: item.roleId,
                status: item.status
            }).then(res => {
                if (res.data.code === ERR_OK) {
                    this.$message.success("保存成功");
                } else {
                    this.$message.error(res.data.msg);
                    item.status = item.status == "1" ? "0" : "1";
                }
            });
        },
        deleteDel(id) {
            this.$confirm("此操作将永久删除该角色, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    delRole({ ids: id }).then(res => {
                        if (res.data.code === ERR_OK) {
                            this.$message.success("删除成功");
                            this.loadRoleList();
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    });
                })
                .catch(() => {});
        }
    }
};
</script>

<style lang="scss" scoped>
.content-wrapp {
    padding: 20px;
    .el-form-item {
        display: inline-block;
        margin-bottom: 10px;
    }
}
</style>
